<template>
  <div>
    <h2>父组件：</h2>
    <div>msg:{{ msg }}</div>
    <div>
      <el-button type="primary" @click="handleChangeMsg1">修改子组件1的消息</el-button>
      <el-button type="primary" @click="handleChangeMsg2">修改子组件2的消息</el-button>
      <el-button type="primary" @click="getAllRef($refs)">获取所有ref，并更改消息</el-button>
    </div>

    <br />
    <hr />
    <br />

    <Child1 ref="child1" />

    <br />
    <hr />
    <br />

    <Child2 ref="child2" />
  </div>
</template>
<script setup lang="ts">
import Child1 from '@views/communication/06_$refs-$parent/Child1.vue'
import Child2 from '@views/communication/06_$refs-$parent/Child2.vue'

defineOptions({
  name: 'RefsParent',
})

const msg = ref('我是父组件的消息')

const child1 = ref()

const child2 = ref()
const handleChangeMsg1 = () => {
  child1.value.msg = '子组件1的消息被更改了'
}
const handleChangeMsg2 = () => {
  child2.value.msg = '子组件2的消息被更改了'
}

const getAllRef = (refs: { [key: string]: any }) => {
  console.log('获取所有的实例对象$refs：', refs)
  // 更改所有实例的msg属性：
  for (let key in refs) {
    refs[key].msg += '~'
  }
}

defineExpose({
  msg
})
</script>

<style scoped></style>
